import {
  View,
  Text,
  Input,
  Picker,
  ScrollView,
  Image,
} from "@tarojs/components";
import { Component, ReactNode } from "react";
import { AtList, AtListItem, AtButton, AtIcon, AtNavBar } from "taro-ui";
import Req, { BASE_URL } from "../../utils/request";
import Taro from "@tarojs/taro";
import { isEmpty, uploadImgConvertUrl } from "../../utils/kit";
import CascadeSelect from "../../components/CascadeSelect";
import CompanySelect from "../../components/CompanySelect";
import "./index.scss";
import { getInfo } from "../../utils/auth";
export default class ProjectForm extends Component {
  state = {
    areaList: [],
    areaName: "",
    address: "",
    areaCheckedValue: [],
    secondLevels: [],
    areaId: "",
    title: "",
    code: "",
    debt: "",
    x: "",
    y: "",
    contacts: "",
    phone: "",
    amount: "",
    locate: "",
    location: "",
    sectorCheckedValue: [],
    firstLevelSector: [], //行业第一级
    sectorId: "",
    sectorName: "",
    sectorIsOpen: false,
    companyIsOpen: false,
    fileList: [], //附件类型

    fujianList: [
      {
        idIndex: 0,
        id: "",
        idName: "",
        path: "",
        pathFileName: "",
      },
    ],

    fundList: [
      {
        idIndex: 0,
        id: "",
        idName: "",
        amount: null,
      },
    ],
    fundArr: [], //其他资金来源类型
  };

  get navBarTitle() {
    const { router } = Taro.getCurrentInstance();
    if (router?.params.id) {
      if (router?.params.reAdd == "2") {
        return "项目编辑";
      }
      return "重新上报";
    }

    return "项目新增";
  }

  //项目总金额
  get amount() {
    const { debt, fundList } = this.state;
    let sum = fundList.reduce((acc: number, cur: any) => {
      if (cur.amount) {
        return acc + parseFloat(cur.amount);
      }
      return acc;
    }, 0);
    if (debt) {
      sum += parseFloat(debt);
    }
    return sum;
  }

  componentDidMount() {
    Req.get("/config/area/list").then((r) => {
      if (r.code === 200) {
        this.setState({
          areaList: r.rows,
        });
      }
    });
    Req.get("/config/file/list").then((r) => {
      if (r.code === 200) {
        const { router } = Taro.getCurrentInstance();
        let _fileList = r.rows;
        //如果是新增不能选择财评
        if (!router?.params.id) {
          _fileList = r.rows.filter((item) => item.id !== 6);
        }
        this.setState({
          fileList: _fileList,
        });
      }
    });
    Req.get("/config/fund/list")
      .then((r) => {
        if (r.code === 200) {
          this.setState({
            fundArr: r.rows,
          });
        }
      })
      .then(() => {
        const { router } = Taro.getCurrentInstance();
        if (router?.params.id) {
          Req.get("/project/" + router.params.id).then((r) => {
            if (r.code === 200) {
              const { fundArr, fileList } = this.state;
              this.setState({
                areaId: r.data.areaId,
                areaName: r.data.areaName,
                title: r.data.title,
                code: r.data.code,
                sectorId: r.data.sectorId,
                address: r.data.address,
                x: r.data.x,
                y: r.data.y,
                location: r.data.location,
                contacts: r.data.contacts,
                phone: r.data.phone,
                amount: r.data.amount,
                debt: r.data.debt,
                locate: r.data.locate,
                sectorName: r.data.sectorName,
                fujianList: r.data.fileList.map((e) => {
                  let _item: any = fileList.find(
                    (item: any) => item.name === e.fileName
                  );
                  let _itemIndex: number = fileList.findIndex(
                    (item: any) => item.name === e.fileName
                  );
                  return {
                    idIndex: _itemIndex,
                    id: _item.id,
                    idName: e.fileName,
                    path: e.img,
                    pathFileName: e.img,
                  };
                }),
                fundList: r.data.fundList.map((e) => {
                  let _item: any = fundArr.find(
                    (item: any) => item.name === e.fundName
                  );
                  let _itemIndex: number = fundArr.findIndex(
                    (item: any) => item.name === e.fundName
                  );
                  return {
                    amount: e.amount,
                    id: _item.id,
                    idIndex: _itemIndex,
                    idName: e.fundName,
                  };
                }),
              });
            }
          });
        }
      });
  }
  openAreaSheet = () => {};
  onSubmit = () => {
    const { router } = Taro.getCurrentInstance();
    const {
      areaId,
      title,
      code,
      sectorId,
      address,
      contacts,
      phone,
      debt,
      fujianList,
      fundList,
      locate,
      x,
      y,
      location,
    } = this.state;
    let _url = "/project/add";
    if (router?.params.id) {
      _url = "/project/edit";
    }
    if (isEmpty(areaId)) {
      Taro.showToast({
        title: "区域不能为空！",
        icon: "none",
        duration: 2000,
      });
      return;
    }
    if (isEmpty(title)) {
      Taro.showToast({
        title: "项目名称不能为空！",
        icon: "none",
        duration: 2000,
      });
      return;
    }

    if (isEmpty(contacts)) {
      Taro.showToast({
        title: "联系人不能为空！",
        icon: "none",
        duration: 2000,
      });
      return;
    }
    if (isEmpty(phone)) {
      Taro.showToast({
        title: "联系电话不能为空！",
        icon: "none",
        duration: 2000,
      });
      return;
    }

    let obj: any = {
      id: router?.params.id ?? null,
      companyId: getInfo()?.company.id,
      areaId,
      title,
      code,
      debt,
      sectorId,
      address,
      contacts,
      phone,
      x,
      y,
      location: JSON.stringify(location),
      locate,
      amount: this.amount, //项目总金额
      fileDetails: (function () {
        if (fujianList.length) {
          return fujianList
            .filter((e) => !isEmpty(e.id) && !isEmpty(e.path))
            .map((item: any) => {
              let qzId = "0";
              if (item.id === 6) {
                //新增
              }
              return `${item.id}|${qzId}|${item.path}`;
            })
            .join(";");
        }
        return "";
      })(),
      fundDetails: (function () {
        if (fundList.length) {
          return fundList
            .filter((e) => !isEmpty(e.id) && !isEmpty(e.amount))
            .map((item) => {
              return `${item.id}|${item.amount}`;
            })
            .join(";");
        }
      })(),
    };
    if (router?.params.reAdd) {
      _url = "/project/add";
      obj["oldId"] = router?.params.id;
      delete obj.id;
    }
    Req.post(_url, {
      ...obj,
    })
      .then((r) => {
        if (r.code === 200) {
          Taro.eventCenter.trigger("refreshData", { force: true });
          if (router?.params.reAdd) {
            Taro.redirectTo({
              url: "/pages/project-management/index",
            });
          } else {
            Taro.navigateBack();
          }
        }
      })
      .catch((e) => {});
  };
  onChangeArea = (e) => {
    const v = e.detail.value;
    const { secondLevels } = this.state;
    const firstLevels = this._getFirstLevel();
    let a1,
      a2 = "",
      areaId = "";
    if (v.length > 0) {
      let l1: any = firstLevels[v[0]];
      a1 = l1.name;
      areaId = l1.id;
    }
    if (v.length > 1) {
      let l2: any = secondLevels[v[1]];
      if (l2) {
        a2 = l2.name;
        areaId = l2.id;
      }
    }
    console.log(a1, a2);
    this.setState({
      areaId: areaId,
      areaName: [a1, a2].filter((e) => Boolean(e)).join("/"),
    });
  };
  _getFirstLevel = () => {
    const { areaList } = this.state;
    return areaList.filter((item: any) => item.parentId === "0");
  };
  _getSecondLevel = (parentId: string) => {
    const { areaList } = this.state;
    let _seconds = areaList.filter((item: any) => item.parentId == parentId);
    return _seconds;
  };

  selectAreaText = () => {
    const { areaList, areaCheckedValue } = this.state;
    console.log(areaList, areaCheckedValue);

    return "";
  };
  onChangeSector = (e) => {
    this.setState({
      sectorIsOpen: true,
    });
  };
  onChangeCompany = (e) => {
    // this.setState({
    //   companyIsOpen:true
    // })
  };
  onOpenLocation = () => {
    Taro.chooseLocation({
      success: (res) => {
        console.log("位置名称：", res.name);
        console.log("经纬度：", res.latitude, res.longitude);
        this.setState({
          locate: res.name,
          x: res.longitude,
          y: res.latitude,
        });
      },
      fail: (err) => {
        console.error("错误信息：", err.errMsg);
      },
      complete: () => {
        console.log("选择操作完成");
      },
    });
  };
  componentDidShow() {
    const { location } = Taro.getStorageSync("areaProps");
    if (location) {
      this.setState({
        location: location,
      });
    }
  }
  componentWillUnmount(): void {
    Taro.removeStorageSync("areaProps");
  }
  render(): ReactNode {
    const firstLevels = this._getFirstLevel();
    const {
      secondLevels,
      areaCheckedValue,
      title,
      code,
      areaName,
      debt,
      sectorIsOpen,
      phone,
      amount,
      contacts,
      address,
      locate,
      location,
      sectorName,
      companyIsOpen,
      fileList,
      fujianList,
      fundList,
      fundArr,
      x,
      y,
    } = this.state;
    const onColumnChange = (e) => {
      const { value, column } = e.detail;
      if (value && column === 0) {
        let { id, name } = firstLevels[value];
        let _selectArea = [];
        let seconds = this._getSecondLevel(id);
        if (name && seconds.length) {
          _selectArea = [value, 0];
        }
        this.setState({
          secondLevels: seconds,
          areaCheckedValue: _selectArea,
        });
      }
    };
    return (
      <View className="pf-container app-container">
        <AtNavBar
          leftIconType="chevron-left"
          leftText="返回"
          color="#3051BE"
          onClickLeftIcon={() => {
            Taro.navigateBack();
          }}
        >
          <View>{this.navBarTitle}</View>
        </AtNavBar>
        <ScrollView className="scroll_wrapper" scrollY>
          <AtList>
            {this.navBarTitle === "项目编辑" ? (
              <>
                <AtListItem
                  title={"区域"}
                  className="form-list-item"
                  note={areaName}
                />
                <AtListItem
                  title={"项目名称"}
                  className="form-list-item"
                  note={title}
                />
                <AtListItem
                  title={"所属行业"}
                  className="form-list-item"
                  note={sectorName}
                />
                <AtListItem
                  title={"项目地址"}
                  className="form-list-item"
                  note={address}
                />
                <AtListItem
                  title={"联系人"}
                  className="form-list-item"
                  note={contacts}
                />
                <AtListItem
                  title={"联系电话"}
                  className="form-list-item"
                  note={phone}
                />
                <AtListItem
                  title={"项目总金额"}
                  className="form-list-item"
                  note={amount}
                />
                <AtListItem
                  title={"债务金额"}
                  className="form-list-item"
                  note={debt}
                />
                <AtListItem
                  title={"附件"}
                  className="form-list-item no-active-effect-item no-arrow-space"
                  note={
                    <>
                      {fujianList.map((item: any, index) => {
                        return (
                          <View key={index} className="fileList-box">
                            <View className="flb-item">
                              <View className="flb-i-v1">
                                <Picker
                                  value={item.idIndex}
                                  mode="selector"
                                  range={fileList}
                                  onChange={(e) => {
                                    const _selected = fileList[e.detail.value];
                                    item.id = _selected.id;
                                    item.idIndex = e.detail.value;
                                    item.idName = _selected.name;
                                    this.setState({
                                      fujianList: [...fujianList],
                                    });
                                  }}
                                  rangeKey="name"
                                >
                                  <View
                                    hoverClass="flb-text-hover"
                                    className="flb-i-text"
                                  >
                                    <Text>
                                      {isEmpty(item.id)
                                        ? "请选择附件类型"
                                        : item.idName}
                                    </Text>
                                  </View>
                                </Picker>
                                <View
                                  hoverClass="flb-text-hover"
                                  onClick={() => {
                                    let _this = this;
                                    Taro.chooseImage({
                                      count: 1, // 默认9
                                      sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                                      sourceType: ["album", "camera"],
                                      success: function (res) {
                                        uploadImgConvertUrl(res.tempFiles).then(
                                          (r) => {
                                            const env = Taro.getEnv();
                                            if (env === Taro.ENV_TYPE.WEB) {
                                              const [uploadFile] = r;
                                              item.pathFileName =
                                                uploadFile.originalFilename;
                                              item.path = uploadFile.fileName;
                                              _this.setState({
                                                fujianList: [...fujianList],
                                              });
                                            } else {
                                              const [uploadFile] = r;
                                              const _d = JSON.parse(
                                                uploadFile.data
                                              );
                                              item.pathFileName =
                                                _d.originalFilename;
                                              item.path = _d.fileName;
                                              _this.setState({
                                                fujianList: [...fujianList],
                                              });
                                            }
                                          }
                                        );
                                      },
                                    });
                                  }}
                                  className="flb-i-text"
                                >
                                  {isEmpty(item.path) ? (
                                    <Text>请选择图片上传</Text>
                                  ) : (
                                    <Image
                                      mode="aspectFill"
                                      style={{
                                        width: "100%",
                                        height: "100px",
                                        borderRadius: "10px",
                                      }}
                                      src={BASE_URL + item.path}
                                    />
                                  )}
                                </View>
                              </View>
                              <View
                                hoverClass="flb-text-hover"
                                style={{
                                  padding: "7px",
                                  display: "flex",
                                  alignItems: "center",
                                  justifyContent: "center",
                                  borderRadius: "5px",
                                }}
                              >
                                <AtIcon
                                  className="trash-icon"
                                  onClick={() => {
                                    let newFujianList = fujianList;
                                    newFujianList.splice(index, 1);
                                    this.setState({
                                      fujianList: [...newFujianList],
                                    });
                                  }}
                                  value="trash"
                                  size={"20"}
                                />
                              </View>
                            </View>
                          </View>
                        );
                      })}
                      <View
                        onClick={() => {
                          let newFujianList = fujianList;
                          newFujianList.push({
                            idIndex: 0,
                            id: "",
                            idName: "",
                            path: "",
                            pathFileName: "",
                          });
                          this.setState({
                            fujianList: [...newFujianList],
                          });
                        }}
                        hoverClass="flb-text-hover"
                        className="flb-add-new-row"
                      >
                        <AtIcon value="add-circle" size={"15"} />
                        <Text>添加附件</Text>
                      </View>
                    </>
                  }
                />
                <AtListItem
                  title={"其他资金来源"}
                  className="form-list-item no-active-effect-item no-arrow-space"
                  note={
                    <View className="plan-table">
                      <View className="plan-tr">
                        <View className="plan-th">其他资金来源</View>
                        <View className="plan-th">金额</View>
                      </View>
                      {fundList.map((e:any,i) => (
                        <View key={i} className="plan-tr">
                          <View className="plan-td">{e.idName}</View>
                          <View className="plan-td">{e.amount}</View>
                        </View>
                      ))}
                    </View>
                  }
                />
              </>
            ) : (
              <>
                <Picker
                  value={areaCheckedValue}
                  onColumnChange={onColumnChange}
                  rangeKey="name"
                  range={[[...firstLevels], [...secondLevels]]}
                  onChange={this.onChangeArea}
                  mode="multiSelector"
                >
                  <AtListItem
                    className="form-list-item form-label-required"
                    title="区域"
                    arrow="down"
                    onClick={this.openAreaSheet}
                    note={
                      <Text>{isEmpty(areaName) ? "请选择" : areaName}</Text>
                    }
                  ></AtListItem>
                </Picker>
                <AtListItem
                  title="项目名称"
                  className="form-list-item no-active-effect-item  form-label-required"
                  note={
                    <View>
                      <Input
                        value={title}
                        onInput={(e) => {
                          this.setState({
                            title: e.detail.value,
                          });
                        }}
                        placeholder="请输入"
                      />
                    </View>
                  }
                />
                <AtListItem
                  onClick={this.onChangeSector}
                  title="所属行业"
                  className="form-list-item"
                  arrow="down"
                  note={
                    <View>
                      <Text>{isEmpty(sectorName) ? "请选择" : sectorName}</Text>
                    </View>
                  }
                />
                <AtListItem
                  title="项目地址"
                  className="form-list-item no-active-effect-item"
                  note={
                    <View>
                      <Input
                        value={address}
                        onInput={(e) => {
                          this.setState({
                            address: e.detail.value,
                          });
                        }}
                        placeholder="请输入"
                      />
                    </View>
                  }
                />
                <AtListItem
                  onClick={this.onOpenLocation}
                  title="定位"
                  className="form-list-item no-arrow-space"
                  note={
                    <View>
                      <Text>{isEmpty(locate) ? "请选择" : locate}</Text>
                    </View>
                  }
                  extraText={<AtIcon size={"22"} value="map-pin" />}
                />
                <AtListItem
                  title="范围框选"
                  arrow="right"
                  className="form-list-item"
                  onClick={() => {
                    Taro.setStorageSync("areaProps", {
                      lat: y,
                      lng: x,
                      location: location,
                    });
                    Taro.navigateTo({
                      url: "/pages/draw-area/index",
                    });
                  }}
                  note={
                    <View>
                      <Text numberOfLines={1}>
                        {isEmpty(location) ? "请选择" : location}
                      </Text>
                    </View>
                  }
                />
                <AtListItem
                  title="联系人"
                  className="form-list-item no-active-effect-item  form-label-required"
                  note={
                    <View>
                      <Input
                        value={contacts}
                        onInput={(e) => {
                          this.setState({
                            contacts: e.detail.value,
                          });
                        }}
                        placeholder="请输入"
                      />
                    </View>
                  }
                />
                <AtListItem
                  title="联系电话"
                  className="form-list-item no-active-effect-item  form-label-required"
                  note={
                    <View>
                      <Input
                        value={phone}
                        onInput={(e) => {
                          this.setState({
                            phone: e.detail.value,
                          });
                        }}
                        placeholder="请输入"
                      />
                    </View>
                  }
                />
                <AtListItem
                  title="项目总金额"
                  className="form-list-item no-active-effect-item"
                  note={
                    <View>
                      <Input
                        type="digit"
                        value={amount}
                        placeholder="请输入"
                        onInput={(e) => {
                          this.setState({
                            amount: e.detail.value,
                          });
                        }}
                      />
                    </View>
                  }
                  extraText={
                    <Text className="small-text">万元</Text>
                  }
                />
                <AtListItem
                  title="债务金额"
                  className="form-list-item no-active-effect-item"
                  note={
                    <View>
                      <Input
                        onInput={(e) => {
                          this.setState({
                            debt: e.detail.value,
                          });
                        }}
                        value={debt}
                        type="digit"
                        placeholder="请输入"
                      />
                    </View>
                  }
                  extraText={
                    <Text className="small-text">万元</Text>
                  }
                />

                <AtListItem
                  className="form-list-item no-active-effect-item no-arrow-space"
                  title="附件"
                  note={
                    <>
                      {fujianList.map((item: any, index) => {
                        return (
                          <View key={index} className="fileList-box">
                            <View className="flb-item">
                              <View className="flb-i-v1">
                                <Picker
                                  value={item.idIndex}
                                  mode="selector"
                                  range={fileList}
                                  onChange={(e) => {
                                    const _selected = fileList[e.detail.value];
                                    item.id = _selected.id;
                                    item.idIndex = e.detail.value;
                                    item.idName = _selected.name;
                                    this.setState({
                                      fujianList: [...fujianList],
                                    });
                                  }}
                                  rangeKey="name"
                                >
                                  <View
                                    hoverClass="flb-text-hover"
                                    className="flb-i-text"
                                  >
                                    <Text>
                                      {isEmpty(item.id)
                                        ? "请选择附件类型"
                                        : item.idName}
                                    </Text>
                                  </View>
                                </Picker>
                                <View
                                  hoverClass="flb-text-hover"
                                  onClick={() => {
                                    let _this = this;
                                    Taro.chooseImage({
                                      count: 1, // 默认9
                                      sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                                      sourceType: ["album", "camera"],
                                      success: function (res) {
                                        uploadImgConvertUrl(res.tempFiles).then(
                                          (r) => {
                                            const env = Taro.getEnv();
                                            if (env === Taro.ENV_TYPE.WEB) {
                                              const [uploadFile] = r;
                                              item.pathFileName =
                                                uploadFile.originalFilename;
                                              item.path = uploadFile.fileName;
                                              _this.setState({
                                                fujianList: [...fujianList],
                                              });
                                            } else {
                                              const [uploadFile] = r;
                                              const _d = JSON.parse(
                                                uploadFile.data
                                              );
                                              item.pathFileName =
                                                _d.originalFilename;
                                              item.path = _d.fileName;
                                              _this.setState({
                                                fujianList: [...fujianList],
                                              });
                                            }
                                          }
                                        );
                                      },
                                    });
                                  }}
                                  className="flb-i-text"
                                >
                                  {isEmpty(item.path) ? (
                                    <Text>请选择图片上传</Text>
                                  ) : (
                                    <Image
                                      mode="aspectFill"
                                      style={{
                                        width: "100%",
                                        height: "100px",
                                        borderRadius: "10px",
                                      }}
                                      src={BASE_URL + item.path}
                                    />
                                  )}
                                </View>
                              </View>
                              <View
                                hoverClass="flb-text-hover"
                                style={{
                                  padding: "7px",
                                  display: "flex",
                                  alignItems: "center",
                                  justifyContent: "center",
                                  borderRadius: "5px",
                                }}
                              >
                                <AtIcon
                                  className="trash-icon"
                                  onClick={() => {
                                    let newFujianList = fujianList;
                                    newFujianList.splice(index, 1);
                                    this.setState({
                                      fujianList: [...newFujianList],
                                    });
                                  }}
                                  value="trash"
                                  size={"20"}
                                />
                              </View>
                            </View>
                          </View>
                        );
                      })}
                      <View
                        onClick={() => {
                          let newFujianList = fujianList;
                          newFujianList.push({
                            idIndex: 0,
                            id: "",
                            idName: "",
                            path: "",
                            pathFileName: "",
                          });
                          this.setState({
                            fujianList: [...newFujianList],
                          });
                        }}
                        hoverClass="flb-text-hover"
                        className="flb-add-new-row"
                      >
                        <AtIcon value="add-circle" size={"15"} />
                        <Text>添加附件</Text>
                      </View>
                    </>
                  }
                ></AtListItem>

                <AtListItem
                  className="form-list-item no-active-effect-item no-arrow-space"
                  title="其他资金来源"
                  note={
                    <View>
                      {fundList.map((item: any, index) => {
                        return (
                          <View key={index} className="fileList-box">
                            <View className="flb-item">
                              <View className="flb-i-v1">
                                <Picker
                                  value={item.idIndex}
                                  mode="selector"
                                  range={fundArr}
                                  rangeKey="name"
                                  onChange={(e) => {
                                    const _selected = fundArr[e.detail.value];
                                    item.id = _selected.id;
                                    item.idIndex = e.detail.value;
                                    item.idName = _selected.name;
                                    this.setState({
                                      fundList: [...fundList],
                                    });
                                  }}
                                >
                                  <View
                                    hoverClass="flb-text-hover"
                                    className="flb-i-text"
                                  >
                                    <Text>
                                      {isEmpty(item.id)
                                        ? "请选择资金来源"
                                        : item.idName}
                                    </Text>
                                  </View>
                                </Picker>
                                <View>
                                  <Input
                                    type="digit"
                                    style={{
                                      padding: "5px 0",
                                    }}
                                    value={item.amount}
                                    onInput={(e) => {
                                      item.amount = e.detail.value;
                                      this.setState({
                                        fundList: [...fundList],
                                      });
                                    }}
                                    placeholder="请输入"
                                  />
                                </View>
                              </View>

                              <AtIcon
                                className="trash-icon"
                                onClick={() => {
                                  let newFujianList = fundList;
                                  newFujianList.splice(index, 1);
                                  this.setState({
                                    fundList: [...newFujianList],
                                  });
                                }}
                                value="trash"
                                size={"20"}
                              />
                            </View>
                          </View>
                        );
                      })}
                      <View
                        hoverClass="flb-text-hover"
                        onClick={() => {
                          let newFujianList = fundList;
                          newFujianList.push({
                            idIndex: 0,
                            id: "",
                            idName: "",
                            amount: null,
                          });
                          this.setState({
                            fundList: [...newFujianList],
                          });
                        }}
                        className="flb-add-new-row"
                      >
                        <AtIcon value="add-circle" size={"15"} />
                        <Text>添加资金来源</Text>
                      </View>
                    </View>
                  }
                ></AtListItem>
              </>
            )}
          </AtList>
        </ScrollView>

        <AtButton
          onClick={this.onSubmit}
          circle
          className="page-bottom-btn primary-brn-color"
          type="primary"
        >
          提交
        </AtButton>

        <CompanySelect visible={companyIsOpen} />
        <CascadeSelect
          onClose={(v) => {
            this.setState({
              sectorIsOpen: v,
            });
          }}
          visible={sectorIsOpen}
          onSelect={(v, tabList) => {
            console.log(v, tabList);
            let _tabList = tabList.slice(0, -1).map((e) => e.title);
            _tabList.push(v.name);

            this.setState({
              sectorName: _tabList.join("/"),
              sectorId: v.id,
              sectorIsOpen: false,
            });
          }}
        />
      </View>
    );
  }
}
